<template>
	<!-- 顶部头像 -->
	<view>
		<view class="flex justify-center top-card">
			<view class="text-center padding-top-lg">
				<tn-avatar :src="avatar" size="lg" />
				<view class="text-white text-xl text-bold padding-top-xs">
					{{name}}
				</view>
				<view class="text-white padding-top-xs">
					{{roleNames.join(' ')}}
				</view>
			</view>
		</view>

		<view class="padding">
			<view class="card" style="margin-top: -110upx;">
				<view class="flex justify-around padding">
					<view class="text-center">
						<view class="text-xxl" style="color: #3f8abc;">{{mine.trainTotal}}</view>
						<view class="text-lg padding-top-xs">累计培训</view>
					</view>
					<view class="text-center">
						<view class="text-xxl" style="color: #3f8abc;">{{mine.examTotal}}</view>
						<view class="text-lg padding-top-xs">累计考试</view>
					</view>
					<view class="text-center">
						<view class="text-xxl" style="color: #3f8abc;">{{mine.docTotal}}</view>
						<view class="text-lg padding-top-xs">累签文档</view>
					</view>
				</view>
			</view>
		</view>

		<view class="padding-left padding-right padding-bottom">
			<view class="card">
				<view v-for="(tag,index) in tagCardArr" class="padding-left padding-right padding-top" :key="index">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<image :src="tag.icon" alt="" style="width: 50upx;height:50upx" />
							<view class="text-lg padding-left-xs">{{tag.title}}</view>
						</view>
						<view>
							<text class="tn-icon-right"></text>
						</view>
					</view>
					<view class="under-line padding-top" />
				</view>
			</view>
		</view>

		<view class="padding-left padding-right padding-bottom" @click="logout">
			<view class="card">
				<view class="padding">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<image :src="setupIcon" alt="" style="width: 50upx;height:50upx" />
							<view class="text-lg padding-left-xs">{{'退出登录'}}</view>
						</view>
						<view>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { showConfirm } from '@/utils/common'
	export default {
		computed: {
			name() {
				return this.$store.getters.name
			},
			roleNames() {
				return this.$store.getters.roleNames
			},
			avatar() {
				return this.$store.getters.avatar ? this.$store.getters.avatar : '/static/mine/avatar.png'
			},
		},
		methods:{
			logout(){
				showConfirm('是否退出登录?').then(res => {
					if (res.confirm) {
						this.$store.dispatch('LogOut').then(res => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						})
					}
				})
			}
		},
		data() {
			return {
				mine: {
					innerHeight: uni.innerHeight,
					avatarUrl: '/static/mine/avatar.png',
					name: '张三',
					post: '盐湖区家客:装维工程师',
					examTotal: 4,
					docTotal: 11,
					trainTotal: 12
				},
				tagCardArr: [{
					icon: '/static/mine/doc.png',
					title: '我的文档',
				}, {
					icon: '/static/mine/train.png',
					title: '我的培训',
				}, {
					icon: '/static/mine/exam.png',
					title: '我的考试',
				}, {
					icon: '/static/mine/contacts.png',
					title: '帮助反馈',
				}, {
					icon: '/static/mine/proposal.png',
					title: '建议我们',
				}],
				setupIcon: '/static/mine/setup.png',

			}
		}
	}
</script>

<style scoped lang="less">
	.top-card {
		height: 350upx;
		width: 100%;
		background-color: #4ECEFF;
		background-image: linear-gradient(to right, #4ECEFF, #56B8FF);
	}

	.card {
		width: 100%;
		border-radius: 10upx;
		box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1), -1px -1px 3px 0 rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
	}

	.under-line {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: #e1e1e1;
		}
	}
	page{
		background-color: #F5F5F9;
	}
</style>